<template>
  <transition name="fade">
    <nav v-if="isShowNav" :class="navClass">
      <div class="nav-left">
        <div class="logo">
          <router-link to="/" class="logo-link">
            <p class="logo-text">Colorful</p>
          </router-link>
        </div>
        <el-menu
          :default-active="activeMenu"
          mode="horizontal"
          background-color="rgba(84, 92, 100, 0)"
          text-color="#fff"
          active-text-color="#49b1f5"
          router
        >
          <el-menu-item index="/">
            <i class="el-icon-s-home" />
            <span>首页</span>
          </el-menu-item>
          <el-menu-item index="/archives">
            <i class="el-icon-date" />
            <span>时间轴</span>
          </el-menu-item>
          <el-menu-item index="/tags">
            <i class="el-icon-price-tag" />
            <span>标签</span>
          </el-menu-item>
          <el-menu-item index="/categories">
            <i class="el-icon-s-grid" />
            <span>分类</span>
          </el-menu-item>
          <el-submenu index="/recreation" :popper-append-to-body="false">
            <template #title>
              <i class="el-icon-headset" />
              <span>娱乐</span>
            </template>
            <el-menu-item index="/film">
              <i class="el-icon-video-camera-solid" />
              <span>电影</span>
            </el-menu-item>
            <el-menu-item index="/wallpaper">
              <i class="el-icon-camera-solid" />
              <span>壁纸</span>
            </el-menu-item>
          </el-submenu>
          <el-menu-item index="/message">
            <i class="el-icon-coffee-cup" />
            <span>留言板</span>
          </el-menu-item>
          <el-menu-item index="/link">
            <i class="el-icon-link" />
            <span>友链</span>
          </el-menu-item>
          <el-menu-item index="/about">
            <i class="el-icon-orange" />
            <span>关于</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="nav-right">
        <el-input
          v-model="keyword"
          :placeholder="hint"
          :class="searchInputClass"
          size="large"
          clearable
          prefix-icon="el-icon-third-search"
          @focus="searchInputFocus"
          @blur="searchInputBlur"
          @keydown.enter.native="searchInputEnter"
        />
        <el-dropdown placement="bottom" @command="handleCommand">
          <el-avatar v-if="!avatarName" fit="cover" :src="defaultAvatar" />
          <el-avatar v-else fit="cover" :src="getUserInfo.avatar">
            {{ avatarName }}
          </el-avatar>
          <el-dropdown-menu
            v-if="!avatarName"
            slot="dropdown"
            :class="{navBG: navClass.navBG}"
          >
            <el-dropdown-item command="signin">登录</el-dropdown-item>
            <el-dropdown-item command="signin">注册</el-dropdown-item>
          </el-dropdown-menu>
          <el-dropdown-menu v-else slot="dropdown" :class="navClass.navBG">
            <el-dropdown-item command="setting">设置</el-dropdown-item>
            <el-dropdown-item command="signout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </nav>
  </transition>
</template>

<script>
import $api from "$api/nav";
import { mapGetters } from "vuex";
export default {
  name: "NavMenu",
  data() {
    return {
      navMenuList: [],
      beforeScrollTop: 0,
      isShowNav: true,
      navClass: {
        nav: true,
        navBG: false,
      },
      hint: "搜索关键字",
      keyword: "",
      blurWidth: true,
      focusWidth: false,
      defaultAvatar: "/avatar.png",
    };
  },
  computed: {
    ...mapGetters(["getUserInfo"]),
    activeMenu() {
      let path = this.$route.path.replace("/", "");
      let index = path.indexOf("/");
      if (index !== -1) {
        path = path.substring(0, path.indexOf("/"));
      }
      return path ? "/" + path : "/";
    },
    searchInputClass() {
      return {
        "blur-width": this.blurWidth,
        "focus-width": this.focusWidth,
      };
    },
    avatarName() {
      const username = this.getUserInfo.username;
      const tel = this.getUserInfo.tel;
      const email = this.getUserInfo.email;
      if (username) {
        return username ? username.split("")[0] : "";
      } else if (tel) {
        return tel ? tel.split("")[0] : "";
      } else {
        return email ? email.split("")[0] : "";
      }
    },
  },
  mounted() {
    this.getInitData();
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    getInitData() {
      // this.getNavMenu();
      this.listenerEvent();
    },
    getNavMenu() {
      $api.getNavMenu().then((res) => {
        if (res.status === 200) {
          this.navMenuList = res.data;
        }
      });
    },
    searchInputFocus() {
      this.hint = "";
      this.focusWidth = true;
      this.blurWidth = false;
    },
    searchInputBlur() {
      this.hint = "搜索关键字";
      this.focusWidth = false;
      this.blurWidth = true;
    },
    searchInputEnter() {
      alert(this.keyword);
      this.keyword = "";
    },
    listenerEvent() {
      this.beforeScrollTop = document.documentElement.scrollTop;
      //监听页面滚动事件
      window.addEventListener("scroll", this.handleScroll);
    },
    handleScroll() {
      let afterScrollTop = document.documentElement.scrollTop;
      if (afterScrollTop > this.beforeScrollTop) {
        this.isShowNav = false;
      } else {
        this.isShowNav = true;
        if (!this.navClass.navBG) {
          this.navClass.navBG = true;
        }
      }
      if (afterScrollTop === 0) {
        if (this.navClass.navBG) {
          this.navClass.navBG = false;
        }
      }
      this.beforeScrollTop = afterScrollTop;
    },
    handleCommand(command) {
      switch (command) {
        case "signin":
          this.$store.commit("setSignStatus", true);
          break;
        case "signout":
          this.$store.commit("signout");
          break;
        case "setting":
          alert("setting");
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
.nav {
  position: fixed;
  width: 100%;
  display: flex;
  align-items: center;
  z-index: 2020;
  padding: 0 0.3rem;
}

.nav-left {
  display: flex;
  flex: 2;
  align-items: center;
}

.logo-text {
  color: white;
  font-size: 0.2rem;
}

.el-menu {
  margin-left: 0.3rem;
  border-bottom: 0;
}

.nav-right {
  display: flex;
  flex: 1;
  justify-content: flex-end;
}

.el-input {
  transition: all 0.3s;
  margin-right: 0.3rem;
}

.el-input.blur-width {
  max-width: 1.5rem;
}

.el-input.focus-width {
  max-width: 4rem;
}

.el-input >>> .el-input__inner {
  text-align: center;
  color: white;
  caret-color: white;
  border: 0.02rem solid #DCDFE6;
  border-radius: 0.1rem;
  border-color: rgba(73, 177, 245, 0.2);
  background-color: rgba(255, 255, 255, 0);
  transition: all 0.3s;
}

.el-input >>> .el-input__inner:hover {
  border-color: rgba(73, 177, 245, 0.8);
}

.el-dropdown .el-avatar {
  font-size: 0.2rem;
  vertical-align: middle;
  text-transform: uppercase;
  background-color: var(--colorLevel1);
}

.el-dropdown-menu {
  background-color: rgba(255, 255, 255, 0);
  border: 0;
}

.el-dropdown-menu__item {
  color: white;
}

.el-dropdown-menu >>> .popper__arrow {
  display: none;
}

.global-sign {
  width: 100%;
  height: 100%;
  opacity: 0.8;
}

/* 滚动条上下滚动时样式 */
.navBG {
  background-color: rgba(255, 255, 255, 0.8);
}

.navBG >>> *, .navBG .el-input >>> .el-input__inner {
  color: var(--fontLevel1);
  caret-color: var(--fontLevel1);
}

.fade-enter-active, .fade-leave-active {
  transition: all 0.5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
  transform: translateY(-0.1rem);
}
</style>